<template>
  <div>
    <div style="padding: 15px 10px; display: flex">
      <a-dropdown>
        <a class="select" @click="(e) => e.preventDefault()">
          选择设备 <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <input type="text" name="search" placeholder="输入设备编号搜索" />
      <el-switch
        style="display: block"
        v-model="value2"
        active-color="#1af7ff"
        inactive-color="#ffffff"
      >
      </el-switch>
    </div>

    <div class="videodiv">
      <el-row :gutter="20">
        <el-col :span="6" style="position: relative"
          ><div
            style="
              z-index: 8;
              position: absolute;
              background-color: rgba(0, 0, 0, 0.25);
              color: #ffffff;
              height: 30px;
              width: 100%;
              font-size: 10px;
              padding-top: 7px;
              text-align: left;
              padding-left: 20px;
            "
          >
            sss
          </div>
          <div
            class="grid-content bg-purple"
            style="position: absolute; z-index: 1"
          >
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <video
              autoplay
              controls
              width="100%"
              height="160px"
              id="videoElement"
              muted
            ></video></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import flvjs from "flv.js/dist/flv.min.js";

export default {
  data() {
    return {
      value1: true,
      value2: true,
      src: [
        "http://192.168.8.208:8035/live?app=sjls&stream=stream-1",
        "http://192.168.8.208:8035/live?app=sjls&stream=stream-2",
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.createVideo();
    });
  },
  methods: {
    createVideo() {
      if (flvjs.isSupported()) {
        var videos = document.getElementsByTagName("video");

        var videoarr = [].slice.call(videos);
        console.log(videoarr);

        videoarr.some((element, idx) => {
          var flvPlayer = flvjs.createPlayer({
            type: "flv",
            url: this.src[idx],
          });
          flvPlayer.attachMediaElement(element);
          flvPlayer.load();
          flvPlayer.play();

          console.log(idx);
          console.log(this.src.length);

          if (idx + 1 >= this.src.length) return true;
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.videodiv {
  padding: 5px 10px 10px 10px;
  width: 100%;
}
.el-row {
  margin-bottom: 12px;
}

.select {
  border: 1px solid #ffffff;
  color: #ffffff;
  height: 30px;
  padding: 3px 10px;
  font-size: 16px;
}
input[type="text"] {
  width: 214px;
  height: 30px;
  box-sizing: border-box;
  border: 2px solid ragb(255, 255, 255, 0.25);
  border-radius: 15px;
  font-size: 16px;
  padding-left: 15px;
  margin: 0 20px;
}
/deep/ .el-switch__core:after {
  background-color: #000;
}

/* 隐藏播放、暂停等各类播放器功能按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
video::-webkit-media-controls-play-button {
  display: none;
}
video::-webkit-media-controls-timeline {
  display: none;
}
video::-webkit-media-controls-current-time-display {
  display: none;
}
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
video::-webkit-media-controls-volume-slider {
  display: none;
}
video::-webkit-media-controls-enclosure {
  display: none;
}

/* 视频全铺 */
video {
  object-fit: fill;
}
</style>


